<template>
  <div class="Westernmeds">
    <div class="center">
      <div class="yyuan">
        <div class="yyleft">
          <p class="flower"><img src="../assets/flower.png" /></p>
          <div class="flcenter" v-for="(item, index) in res" :key="index">
            <p class="iii"><img :src="item.image" /></p>
            <p class="title">{{ item.name}}</p>
            <p class="text" v-html='item.content'></p>
            <p class="text">
              {{item.china}}
            </p>
          </div>
          <p class="flower"><img src="../assets/flower.png" /></p>
        </div>
        <div class="yyright">
          <Hotright></Hotright>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Hotright from "@/components/Hotright.vue";
export default {
  name: "Hospitals",
  components: {
    Hotright,
  },
  data: function() {
    return {
      id:'',
      res:[],
      top: [
        {
          image: require("../assets/s.png"),
          title: "【主治功效】用于治疗盘状红斑狼疮及系统性红斑狼疮。",
          text:
            "【用法用量】口服，成年人每日0.4g，分1～2次服用，根据患者的反应，该剂量可持续数周或数月。长期维持治疗，可用较小的剂量，每日0.2～0.4g即可。",
        },
        {
          image: require("../assets/s.png"),
          title: "【主治功效】用于治疗盘状红斑狼疮及系统性红斑狼疮。",
          text:
            "【用法用量】口服，成年人每日0.4g，分1～2次服用，根据患者的反应，该剂量可持续数周或数月。长期维持治疗，可用较小的剂量，每日0.2～0.4g即可。",
        },
        {
          image: require("../assets/s2.png"),
          title: "【主治功效】用于治疗盘状红斑狼疮及系统性红斑狼疮。",
          text:
            "【用法用量】口服，成年人每日0.4g，分1～2次服用，根据患者的反应，该剂量可持续数周或数月。长期维持治疗，可用较小的剂量，每日0.2～0.4g即可。",
        },
        {
          image: require("../assets/s2.png"),
          title: "【主治功效】用于治疗盘状红斑狼疮及系统性红斑狼疮。",
          text:
            "【用法用量】口服，成年人每日0.4g，分1～2次服用，根据患者的反应，该剂量可持续数周或数月。长期维持治疗，可用较小的剂量，每日0.2～0.4g即可。",
        },
      ],
    };
  },
  created(){
    this.id=this.$router.history.current.query.id
    axios.get("/zice/yes?id="+this.id)
    .then((res)=>{this.res=res.data.data})
  }
};
</script>

<style scoped>
.Westernmeds {
  width: 100%;
  background-color: #fce7d7;
}
.yyuan {
  width: 100%;
  margin-top: 2rem;
  padding-left: 3%;
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
}
.yyuan .yyleft {
  width: 65%;
  /* border: 1px solid #f00; */
}
.yyuan .yyright {
  width: 25%;
  /* border: 1px solid #f00; */
}
.flower {
  width: 100%;
}
.flower img {
  display: block;
  width: 100%;
}
.flcenter {
  position: relative;
  width: 65%;
  margin: 0 auto;
  padding-bottom: 3rem;
}
/* .iii,.title,.text {
   border: 1px solid #f00; 
} */
.iii {
  width: 60%;
  margin: 0 auto;
}
.iii img {
  display: block;
  width: 100%;
}
.title {
  color: #a40000;
  font-size: 20px;
  background: url(../assets/s3.png) no-repeat 2% center;
  text-indent: 2rem;
  margin: 1rem 0;
  margin-top: 2rem;
}
.text {
  padding-left: 2%;
  line-height: 2rem;
}
</style>
